HTML 77.2%
TypeScript 10.5%
Python 9.6%
JavaScript 2.5%
1import { ExternalLink } from 'lucide-react';2import type { Metadata } from 'next';3import Link from 'next/link';4import { notFound, permanentRedirect } from 'next/navigation';5import { HistoryChart } from '@/components/benchmarks/leaderboard';6import { FrontierChart, GroupPicker, Leaderboard2 } from '@/components/benchmarks/leaderboard2';7import { CompareTrayBar } from '@/components/compare/compare-tray-bar';8import { ComparabilityLegend } from '@/components/entity/model-blocks';9import { TerminalLayout } from '@/components/layout/terminal';10import { ViewBeacon } from '@/components/layout/view-beacon';11import { TrustBadge } from '@/components/models/badges';12import { fmtScoreUnit, TRUST_LONG } from '@/components/models/shared';13import { EntityBadge, StatusBadge } from '@/components/ui/badges';14import { EntityLink, QualityMark } from '@/components/ui/entity';15import { KeyValue, type KVRow } from '@/components/ui/key-value';16import { Container, Note } from '@/components/ui/section';17import { Unavailable } from '@/components/ui/unavailable';18import { api, ApiError, apiD1, safe } from '@/lib/api';19import { cn } from '@/lib/cn';20import { fmtAgo, fmtDate, fmtInt, num } from '@/lib/format';21import { routes, SITE_NAME, SITE_URL } from '@/lib/site';22import type { BenchmarkDetail, Group } from '@/lib/types';2324/*25 Benchmark leaderboard page 2.0 — TerminalLayout: filters (comparability group · trust · organization · comparable-only) ·26 main (variant navigation, frontier over time, one-row-per-model leaderboard) · inspector (definition with evidence, trust mix, links).27*/2829type SP = Record<string, string | undefined>;30type Params = { params: Promise<{ slug: string }>; searchParams: Promise<SP> };31const LIMIT = 100;32export const revalidate = 300;3334async function loadBenchmark(slug: string): Promise<BenchmarkDetail> {35 try {36 const d = await apiD1.benchmark(slug);37 if (d.entity_type !== 'benchmark') notFound();38 return d;39 } catch (e) {40 if (e instanceof ApiError && e.notFound) notFound();41 throw e;42 }43}4445export async function generateMetadata({ params }: Params): Promise<Metadata> {46 const { slug } = await params;47 const d = await safe(apiD1.benchmark(slug));48 if (!d || d.entity_type !== 'benchmark' || d.slug !== slug) return { title: 'Benchmark', robots: { index: false } };49 const title = `${d.name} Leaderboard & Results`;50 const leader = d.leaderboard?.[0];51 const description = `${d.name}${d.category ? ` (${d.category})` : ''}: ${fmtInt(d.result_count ?? 0)} current results across ${fmtInt(d.model_count ?? 0)} canonical models, metric ${d.metric ?? '—'}${leader ? `; current recorded leader ${leader.model.name} at ${fmtScoreUnit(leader.score, leader.unit)} (${leader.trust_label})` : ''}. Comparability groups, trust levels, frontier over time and per-model history on ${SITE_NAME}.`.slice(0, 300);52 const canonical = routes.benchmark(d.slug);53 return { title, description, alternates: { canonical }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${canonical}`, type: 'article', siteName: SITE_NAME }, twitter: { card: 'summary_large_image', title, description } };54}5556export default async function BenchmarkPage({ params, searchParams }: Params) {57 const { slug } = await params;58 const sp = await searchParams;59 const d = await loadBenchmark(slug);60 if (d.slug !== slug) permanentRedirect(routes.benchmark(d.slug));61 const canonical = routes.benchmark(d.slug);62 // Group from `?group=metric|config_key` (select form) or `?metric=&config_key=` (links).63 let metric = sp.metric?.trim() || undefined;64 let configKey = sp.config_key?.trim() || undefined;65 if (sp.group?.includes('|')) [metric, configKey] = sp.group.split('|') as [string, string];66 const trust = sp.trust?.trim() || undefined;67 const org = sp.org?.trim() || undefined;68 const comparableOnly = sp.comparable_only === '1';69 const offset = Math.max(0, Number(sp.offset) || 0);70 const model = sp.model?.trim() || undefined;71 const [lb, frontier, list, history] = await Promise.all([72 safe(apiD1.leaderboard(d.slug, { metric, config_key: configKey, trust, org, comparable_only: comparableOnly ? 1 : undefined, limit: LIMIT, offset })),73 safe(apiD1.frontier(d.slug, { metric, config_key: configKey })),74 safe(apiD1.benchmarks()),75 model ? safe(api.benchmarkHistory(d.slug, model)) : Promise.resolve(null),76 ]);77 const group: Group | null = lb?.group ?? d.primary_group ?? null;78 const groups = lb?.groups ?? d.groups ?? [];79 const a = d.attributes ?? {};80 const unit = typeof a.unit === 'string' ? a.unit : (lb?.items[0]?.unit ?? null);81 const item = list?.items.find((b) => b.slug === d.slug) ?? null;82 const siblings = list?.items.filter((b) => (b.family ?? b.slug) === (d.family ?? item?.family ?? d.slug)).sort((x, y) => Number(!!y.attributes?.family_head) - Number(!!x.attributes?.family_head) || (num(y.result_count) ?? 0) - (num(x.result_count) ?? 0)) ?? [];83 const cur: SP = { metric, config_key: configKey, trust, org, comparable_only: comparableOnly ? '1' : undefined, model };84 const href = (patch: SP) => {85 const p = new URLSearchParams();86 for (const [k, v] of Object.entries({ ...cur, ...patch })) if (v) p.set(k, v);87 const s = p.toString();88 return `${canonical}${s ? `?${s}` : ''}`;89 };90 const link = (k: string) => (typeof a[k] === 'string' && /^https?:\/\//.test(a[k] as string) ? (a[k] as string) : null);91 const site = link('website') ?? link('official_url');92 const defRows: KVRow[] = [93 { key: 'task', raw: a.task },94 { key: 'metric', raw: a.metric_label ?? a.metric, value: typeof (a.metric_label ?? a.metric) === 'string' ? <span>{String(a.metric_label ?? a.metric)}{unit && <span className="text-ink-3"> · {unit}</span>}{a.higher_is_better === false ? <span className="text-ink-3"> · lower is better</span> : ''}</span> : undefined },95 { key: 'metric_min', label: 'Metric range', raw: num(a.metric_min) !== null && num(a.metric_max) !== null ? `${a.metric_min} – ${a.metric_max}` : undefined },96 { key: 'variant', raw: a.variant },97 { key: 'version', raw: a.version },98 { key: 'harness', raw: a.harness },99 { key: 'comparability_note', label: 'Comparability note', raw: a.comparability_note },100 { key: 'known_limitations', raw: a.known_limitations },101 { key: 'paper', raw: a.paper },102 { key: 'paper_url', raw: a.paper_url },103 { key: 'website', raw: a.website },104 { key: 'creator', raw: a.creator },105 ];106 const trustMix = lb?.group?.trust_mix ?? d.trust_mix ?? item?.trust_mix ?? {};107 const filterCount = [trust, org, comparableOnly ? '1' : undefined, configKey].filter(Boolean).length;108 const ld = { '@context': 'https://schema.org', '@type': 'Dataset', name: `${d.name} leaderboard`, url: `${SITE_URL}${canonical}`, description: d.description ?? (typeof a.task === 'string' ? a.task : undefined), alternateName: d.aliases?.length ? d.aliases : undefined, measurementTechnique: typeof a.metric === 'string' ? a.metric : undefined, sameAs: [site, link('paper')].filter(Boolean), variableMeasured: typeof a.metric === 'string' ? a.metric : undefined };109 const empty = (num(d.result_count) ?? 0) === 0;110111 const filters = (112 <div className="space-y-5 pb-6 text-sm" data-leaderboard-filters>113 <div>114 <p className="eyebrow mb-1">Comparability group</p>115 <GroupPicker groups={groups} active={group} makeHref={(g) => href({ metric: g.metric, config_key: g.config_key, offset: undefined })} slug={d.slug} hidden={{ trust, org, comparable_only: cur.comparable_only }} />116 </div>117 {Object.keys(trustMix).length > 0 && (118 <div>119 <p className="eyebrow mb-1">Trust level</p>120 <ul className="space-y-px">121 <li>122 <Link href={href({ trust: undefined, offset: undefined })} className={cn('flex min-h-8 items-center justify-between px-1 text-[13px] hover:bg-surface-2', !trust ? 'bg-surface-2 font-medium text-ink' : 'text-ink-2')} aria-current={!trust ? 'true' : undefined}>123 <span>All</span>124 <span className="tnum text-xs text-ink-3">{fmtInt(Object.values(trustMix).reduce((n, v) => n + v, 0))}</span>125 </Link>126 </li>127 {Object.entries(trustMix)128 .sort((x, y) => y[1] - x[1])129 .map(([k, n]) => (130 <li key={k}>131 <Link href={href({ trust: trust === k ? undefined : k, offset: undefined })} className={cn('flex min-h-8 items-center justify-between gap-2 px-1 text-[13px] hover:bg-surface-2', trust === k ? 'bg-surface-2 font-medium text-ink' : 'text-ink-2')} aria-current={trust === k ? 'true' : undefined} title={TRUST_LONG[k] ?? k}>132 <TrustBadge level={k} />133 <span className="tnum text-xs text-ink-3">{fmtInt(n)}</span>134 </Link>135 </li>136 ))}137 </ul>138 </div>139 )}140 <form action={canonical} method="get" className="space-y-3">141 {metric && <input type="hidden" name="metric" value={metric} />}142 {configKey && <input type="hidden" name="config_key" value={configKey} />}143 {trust && <input type="hidden" name="trust" value={trust} />}144 <label className="block">145 <span className="eyebrow block pb-1">Organization slug</span>146 <input name="org" defaultValue={org ?? ''} placeholder="anthropic, openai…" className="h-9 w-full border border-rule bg-surface px-2 text-[13px] text-ink focus:border-accent focus:outline-none" />147 </label>148 <label className="flex min-h-9 items-center gap-2 text-[13px] text-ink-2">149 <input type="checkbox" name="comparable_only" value="1" defaultChecked={comparableOnly} className="size-4 accent-[var(--accent)]" /> Comparable rows only150 </label>151 <div className="flex gap-2">152 <button type="submit" className="inline-flex h-9 flex-1 items-center justify-center bg-ink px-3 text-[13px] font-medium text-canvas hover:opacity-90">153 Apply154 </button>155 <Link href={canonical} className="inline-flex h-9 items-center border border-rule px-3 text-[13px] text-ink-2 hover:text-ink">156 Reset157 </Link>158 </div>159 </form>160 <div>161 <p className="eyebrow mb-1">Views</p>162 <ul className="space-y-px text-[13px]">163 <li>164 <Link href={`${canonical}/cost-vs-performance${group ? `?metric=${encodeURIComponent(group.metric)}&config_key=${encodeURIComponent(group.config_key)}` : ''}`} className="flex min-h-8 items-center px-1 text-ink-2 hover:bg-surface-2 hover:text-ink">165 Cost vs performance →166 </Link>167 </li>168 <li>169 <Link href={`/benchmarks/matrix?benchmarks=${encodeURIComponent(d.slug)}`} className="flex min-h-8 items-center px-1 text-ink-2 hover:bg-surface-2 hover:text-ink">170 In the matrix →171 </Link>172 </li>173 <li>174 <Link href={`${routes.timeline({ entity: d.slug })}`} className="flex min-h-8 items-center px-1 text-ink-2 hover:bg-surface-2 hover:text-ink">175 Timeline →176 </Link>177 </li>178 </ul>179 </div>180 </div>181 );182183 const inspector = (184 <div className="space-y-5 text-sm" data-benchmark-definition>185 <div>186 <KeyValue rows={defRows} provenance={d.provenance} slug={d.slug} entity={{ name: d.name, entity_type: 'benchmark' }} dense />187 </div>188 {group && (189 <div>190 <p className="eyebrow mb-1">Active group</p>191 <p className="text-[13px] text-ink">{group.label}</p>192 <p className="tnum text-xs text-ink-3">193 {fmtInt(group.model_count)} models · {fmtInt(group.n)} current rows194 </p>195 </div>196 )}197 <div>198 <p className="eyebrow mb-1">Comparability</p>199 <ComparabilityLegend />200 </div>201 {d.aliases?.length > 0 && (202 <div>203 <p className="eyebrow mb-1">Also known as</p>204 <p className="text-xs text-ink-2">{d.aliases.join(', ')}</p>205 </div>206 )}207 <p className="mono break-all text-[11px] text-ink-3">208 slug {d.slug} · {d.id}209 </p>210 {lb?.methodology && <Note>{lb.methodology}</Note>}211 </div>212 );213214 return (215 <>216 <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />217 <ViewBeacon path={canonical} />218 <Container wide>219 <nav aria-label="Breadcrumb" className="pt-5 text-xs text-ink-3">220 <ol className="flex flex-wrap items-center gap-1.5">221 <li>222 <Link href="/" className="hover:text-ink">223 AI Atlas224 </Link>225 </li>226 <li aria-hidden>/</li>227 <li>228 <Link href={routes.benchmarks()} className="hover:text-ink">229 Benchmarks230 </Link>231 </li>232 {d.category && (233 <>234 <li aria-hidden>/</li>235 <li>236 <Link href={`/benchmarks?category=${encodeURIComponent(d.category)}`} className="hover:text-ink">237 {d.category}238 </Link>239 </li>240 </>241 )}242 <li aria-hidden>/</li>243 <li className="text-ink-2">{d.name}</li>244 </ol>245 </nav>246 <header className="pb-4 pt-4 md:pt-5">247 <div className="flex flex-wrap items-center gap-2">248 <EntityBadge type="benchmark" />249 <StatusBadge status={d.status} />250 {d.category && <span className="text-xs text-ink-3">category · {d.category}</span>}251 {d.family && d.variant && (252 <span className="text-xs text-ink-3">253 family · {d.family} · variant {d.variant}254 </span>255 )}256 </div>257 <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">258 <div className="min-w-0">259 <h1 className="display text-[30px] md:text-[44px]">{d.name}</h1>260 <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[15px] text-ink-2">261 {typeof a.creator === 'string' && <span className="font-medium text-ink">{a.creator}</span>}262 {site && (263 <a href={site} target="_blank" rel="noopener noreferrer" className="inline-flex max-w-full min-w-0 items-center gap-1 text-ink-3 hover:text-accent">264 <span className="truncate">{site.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '').slice(0, 48)}</span> <ExternalLink className="size-3.5 shrink-0" aria-hidden />265 </a>266 )}267 </p>268 {(d.description || typeof a.task === 'string') && <p className="mt-3 max-w-3xl text-[15px] leading-relaxed text-ink-2">{d.description ?? (a.task as string)}</p>}269 </div>270 <div className="shrink-0 text-xs text-ink-3 lg:text-right">271 <QualityMark q={d.quality?.score} label />272 <p className="mt-1" title={d.updated_at}>273 Updated {fmtAgo(d.updated_at)} · first seen {fmtDate(d.first_seen_at)}274 </p>275 </div>276 </div>277 <dl className="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 border-y border-rule py-3 sm:grid-cols-4" data-benchmark-strip>278 <div>279 <dt className="eyebrow">Metric</dt>280 <dd className="mt-0.5 truncate text-[15px] font-medium text-ink">281 {d.metric ?? '—'}282 {unit && <span className="text-ink-3"> · {unit}</span>} <span className="text-ink-3">{d.direction === 'lower' ? '↓' : '↑'}</span>283 </dd>284 </div>285 <div>286 <dt className="eyebrow">Current results</dt>287 <dd className="tnum mt-0.5 text-[15px] font-medium text-ink">{fmtInt(d.result_count ?? 0)}</dd>288 </div>289 <div>290 <dt className="eyebrow">Models</dt>291 <dd className="tnum mt-0.5 text-[15px] font-medium text-ink">{fmtInt(d.model_count ?? 0)}</dd>292 </div>293 <div>294 <dt className="eyebrow">Current leader</dt>295 <dd className="mt-0.5 truncate text-[15px] font-medium text-ink">296 {lb?.items[0] && offset === 0 ? (297 <>298 <EntityLink e={{ ...lb.items[0].model, entity_type: 'model' }} /> <span className="tnum text-ink-2">{fmtScoreUnit(lb.items[0].score, unit)}</span>299 </>300 ) : item?.leader ? (301 <>302 <EntityLink e={{ ...item.leader.model, entity_type: 'model' }} /> <span className="tnum text-ink-2">{fmtScoreUnit(item.leader.score, unit)}</span>303 </>304 ) : (305 <span className="text-ink-3">—</span>306 )}307 </dd>308 </div>309 </dl>310 {siblings.length > 1 && (311 <nav aria-label="Variants" className="no-scrollbar -mx-4 mt-3 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0" data-variant-nav>312 <span className="eyebrow mr-1 flex items-center">Variants</span>313 {siblings.map((s) => (314 <Link key={s.slug} href={routes.benchmark(s.slug)} aria-current={s.slug === d.slug ? 'page' : undefined} className={cn('inline-flex h-8 items-center gap-1.5 border px-2.5 text-xs whitespace-nowrap', s.slug === d.slug ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>315 {s.variant ?? s.name}316 {s.attributes?.family_head ? <span className="opacity-70">· head</span> : null}317 <span className="tnum opacity-70">{fmtInt(s.result_count)}</span>318 </Link>319 ))}320 </nav>321 )}322 </header>323 </Container>324325 <TerminalLayout filters={filters} filterCount={filterCount} inspector={inspector} inspectorTitle="Definition" storageKey="aia-leaderboard-inspector">326 <div className="space-y-8 pb-16">327 {empty && (328 <p className="border-l-2 border-warning bg-warning-soft/40 px-3 py-2 text-xs text-ink-2" data-honesty>329 No results recorded for this benchmark yet — its sources are being connected. The definition, aliases and variants are kept so links resolve; nothing is fabricated.330 </p>331 )}332 {model && (333 <section>334 {history ? <HistoryChart items={history.items} model={model} unit={unit} /> : <Unavailable what="Result history" compact />}335 <p className="mt-2 text-xs">336 <Link href={href({ model: undefined })} className="link">337 Back to the leaderboard338 </Link>339 </p>340 </section>341 )}342 {!empty && (343 <section>344 <p className="eyebrow mb-2">345 Frontier over time {group && <span className="text-ink-3">· {group.label}</span>}346 </p>347 <FrontierChart frontier={frontier} group={group} unit={unit} />348 </section>349 )}350 <section>351 <div className="mb-2 flex flex-wrap items-center justify-between gap-2">352 <p className="eyebrow">353 Leaderboard {lb && <span className="tnum text-ink-3">{fmtInt(lb.total)} models{trust ? ` · trust ${trust}` : ''}{org ? ` · org ${org}` : ''}{comparableOnly ? ' · comparable only' : ''}</span>}354 </p>355 <p className="text-xs text-ink-3">356 Select models with <span className="mono">+</span>, then <Link href={routes.compare()} className="link">Compare</Link>.357 </p>358 </div>359 {!lb ? <Unavailable what="Leaderboard" /> : <Leaderboard2 rows={lb.items} group={group} total={lb.total} limit={LIMIT} offset={offset} unit={unit} activeModel={model} makeHref={(o) => href({ offset: o ? String(o) : undefined })} historyHref={(s) => href({ model: model === s ? undefined : s })} />}360 </section>361 </div>362 </TerminalLayout>363 <CompareTrayBar />364 </>365 );366}367